<!-- 主导航页面 -->
<template>
  <div class="container-theme-nav-page">
    <div class="wrapper" :style="{width:warperWidth}">

      <!-- 侧边用户中心 -->
      <!-- <transition name="menu-fade">
        <div class="menu" v-show="isShowMenu" @click="close">
           <user></user>
        </div>
      </transition>  -->


      <!-- <div  class="index"> -->
        <!-- 页面 -->
        <!-- <keep-alive>
          <router-view v-if="$route.meta.keepAlive"/>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/> -->


        <!-- 底部主导航 -->
        <!-- <div class="footer-style">

          <v-foot></v-foot>   
        </div>
      </div> -->



      <div class="swiper-container" id="swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide one" :style="{width: menuWidth+' !important;'}">
            <div class="menu" @click="close">
              <user></user>
            </div>
          </div>
          <div class="swiper-slide"  >
            <div  class="index">
              <!-- 页面 -->
              <keep-alive>
                <router-view v-if="$route.meta.keepAlive"/>
              </keep-alive>
              <router-view v-if="!$route.meta.keepAlive"/>


              <!-- 底部主导航 -->
              <div class="footer-style">

                <v-foot></v-foot>
              </div>
            </div>
          </div>


          



        </div>
      </div>





    </div>
  </div>
</template>

<script type='textecmascript-6'>
// vuex
import { mapMutations } from "vuex"
//组件
import vFoot from "./components/footer"
import user from '@/components/user/user'

export default {
  data() {
    return {
      indexSwiper:{},//切换
      warperWidth:'18rem',
      menuWidth:'8rem'
    };
  },
  mounted(){
    this.$nextTick(()=>{
      let that = this
      this.indexSwiper = new this.$Swiper('#swiper1', {
        autoplay: false,//可选选项，自动滑动
        resistanceRatio : 0,
        slidesPerView: 'auto',
        spaceBetween: 0,
        initialSlide :1,
        noSwiping : true,
        noSwipingClass : 'stop-swiping',
        on: {
          reachBeginning(){
            console.log('切换到第0个')
            that.upIsShowMenu(true); 
          },
          reachEnd(){
            console.log('切换到最后一个')
            that.upIsShowMenu(false);
          }
        },
      })
    })
  },
  computed:{
    /**
     * 侧边栏用户中心是否打开
     */
    isShowMenu(){
      console.log(this.$store.getters.getIsShowMenu)
      return this.$store.getters.getIsShowMenu
    },
    pageActive(){
      console.log(this.$store.getters.pageActive)
      // let d = this.$store.getters.pageActive
      // this.$nextTick(()=>{

      //   if(d!=0){
      //     this.indexSwiper.detachEvents(); //移除所有slide监听事件
      //   }else{
      //     this.indexSwiper.attachEvents();//重新绑定所有监听事件。
      //   }
      // })
      return this.$store.getters.pageActive
    },
    //打开左侧菜单
    tomenu(){
      return this.$store.getters.getTomenu
    }
  },
  watch:{
    pageActive(d,old){
      console.log(d)
      this.$nextTick(()=>{
        if(d!=0){
          this.warperWidth='10rem',
          this.menuWidth='0rem'
          this.indexSwiper.detachEvents(); //移除所有slide监听事件
          // this.indexSwiper.removeSlide(0); //移除第二个slide
        }else{
          this.warperWidth='18rem',
          this.menuWidth='8rem'
          this.indexSwiper.attachEvents();//重新绑定所有监听事件。
        }
        // if(d!=0 && old==0){
        //   this.indexSwiper.detachEvents(); //移除所有slide监听事件
        // }else if(d==0 && old!=0){
        //   this.indexSwiper.attachEvents();//重新绑定所有监听事件。
        // }
      })
    },
    tomenu(d){
      this.indexSwiper.slidePrev()
    }
  },
  components: {
    vFoot,user
  },
  methods:{
    close(){
      //关闭侧边栏
      this.upIsShowMenu(false)
    },
    ...mapMutations({
      upIsShowMenu: "IS_SHOW_MENU"
    })
  }
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.container-theme-nav-page
  width 750px
  overflow hidden
  .wrapper
    width 1350px
    height 100%
    display flex
    .menu
      width 8rem
      height 100%
      z-index 999
      overflow hidden
      background-color white
    .index
      width 750px
      height 100%
      .footer-style
        width 100%
        
</style>
<style>
/* .menu-fade-enter,.menu-fade-leave-to{
  width: 0px !important;
}
.menu-fade-enter-active,.menu-fade-leave-active{
  transition:width .2s
}
.menu-fade-enter-to,.menu-fade-leave{
  width: 8rem
} */
.index {
  position: relative;
}
::-webkit-scrollbar{
    display: none
}
.one{
  width: 8rem !important;
}
</style>
